<template>
  <div class="zl-details-modal-container" id="zl-details-modal-container">
    <a-modal
      :visible.sync="visible"
      title="张拉明细"
      width="1280px"
      wrapClassName="detail-modal-warp"
      :footer="null"
      @cancel="handleClick()"
    >
      <div class="detail-modal-body" v-loading="loading">
        <div class="table-contaier">
          <vxe-table
            align="center"
            border
            :data="dataSource"
            show-overflow
            show-header-overflow
            show-footer-overflow
            show-footer
            :column-config="{ resizable: true }"
            class="scrollbarStyle"
            height="580px"
            :sort-config="{ trigger: 'cell' }"
            :span-method="mergeRowMethod"
            ref="xTable"
            :scroll-x="{ gt: 10 }"
            :scroll-y="{ gt: 100 }"
            row-id="id"
            :checkbox-config="{
              reserve: true,
            }"
          >
            <vxe-column type="seq" width="100" title="序号"></vxe-column>
            <vxe-column
              :title="item.title"
              :field="item.key"
              :key="index"
              :min-width="item.width"
              show-overflow
              v-for="(item, index) in table.columns"
            >
              <template #default="{ row }">
                <div
                  v-if="item.key == 'result'"
                  class="result-td"
                  :class="row[item.key] == '合格' ? 'ok' : 'error'"
                >
                  {{ row[item.key] }}
                </div>
                <div v-else>{{ row[item.key] }}</div>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
// 张拉明细【弹窗】
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: "",
    },
    dataSource: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
        } else {
          this.table.source = [];
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      loading: false,
      table: {
        source: [],
        columns: [
          {
            title: "钢束编号",
            dataIndex: "steelBeamNo",
            key: "steelBeamNo",
            width: "120px",
          },
          {
            title: "张拉时间",
            dataIndex: "tensioningDate",
            key: "tensioningDate",
            width: "180px",
          },
          {
            title: "断面",
            dataIndex: "tensioningSection",
            key: "tensioningSection",
            width: "120px",
          },
          {
            title: "记录项目",
            dataIndex: "type",
            key: "type",
            width: "120px",
          },
          {
            title: "初始行程",
            dataIndex: "type0",
            key: "type0",
            width: "120px",
          },
          {
            title: "第二行程",
            dataIndex: "type1",
            key: "type1",
            width: "120px",
          },
          {
            title: "第三行程",
            dataIndex: "type2",
            key: "type2",
            width: "120px",
          },
          {
            title: "第三后行程",
            dataIndex: "type3",
            key: "type3",
            width: "120px",
          },
          {
            title: "终张行程",
            dataIndex: "type4",
            key: "type4",
            width: "120px",
          },
          {
            title: "总伸长量(mm)",
            dataIndex: "totalElongation",
            key: "totalElongation",
            width: "120px",
          },
          {
            title: "理论伸长量(mm)",
            dataIndex: "theoreticalElongation",
            key: "theoreticalElongation",
            width: "140px",
          },
          {
            title: "延伸误差量(%)",
            dataIndex: "extendError",
            key: "extendError",
            width: "140px",
          },
          {
            title: "张拉结果",
            dataIndex: "result",
            key: "result",
            width: "120px",
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    mergeRowMethod({ row, _rowIndex, column, visibleData }) {
      //需要执行合并的key
      const fields = [
        "steelBeamNo",
        "tensioningDate",
        "tensioningSection",
        "totalElongation",
        "theoreticalElongation",
        "extendError",
        "result",
      ];
      const cellValue = row[column.property];
      if (cellValue && fields.includes(column.property)) {
        const prevRow = visibleData[_rowIndex - 1];
        let nextRow = visibleData[_rowIndex + 1];
        if (
          prevRow &&
          prevRow[column.property] === cellValue &&
          this.setCondition(prevRow, column, row)
        ) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let countRowspan = 1;
          while (
            nextRow &&
            nextRow[column.property] === cellValue &&
            this.setCondition(nextRow, column, row)
          ) {
            nextRow = visibleData[++countRowspan + _rowIndex];
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 };
          }
        }
      }
    },

    //合并规则条件
    setCondition(newRow = {}, column = {}, row = {}) {
      let { property } = column;
      let steelBeamNoFlag = newRow["steelBeamNo"] === row["steelBeamNo"];
      if (property == "totalElongation" || property == "tensioningDate") {
        return steelBeamNoFlag;
      } else {
        return steelBeamNoFlag;
      }
    },

    getContainer() {
      return document.getElementById("zl-details-modal-container");
    },

    //关闭
    handleClick() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="less" scoped>
.zl-details-modal-container {
  /deep/.ant-modal-body {
    padding: 0;
  }
  .detail-modal-body {
    height: 620px;
    overflow: hidden;
    .flex();
    flex-direction: column;
    .table-contaier {
      flex: 1;
      padding: 20px;
      overflow: hidden;
      tr {
        .multiline-item {
          margin: 2px 0;
        }
        .result-td {
          &.ok {
            color: #4bc964;
          }
          &.error {
            color: #ff3f4a;
          }
        }
      }
    }
    .pager-contaier {
      flex-shrink: 0;
      height: 80px;
      .flex();
      align-items: center;
      padding: 0 20px;
      justify-content: flex-end;
      /deep/.vxe-pager {
        padding-right: 0;
      }
    }
  }
}
</style>
